<!DOCTYPE html>
<html>
<head>
 <link href="style3.css" rel="stylesheet" type="text/css" />
<?// style of cover page and the text in it?>
<?php include "jquery.php" ?>
<script type="text/javascript">
 $(document).ready(function() {
               $('#warning a').click(function(e) {
                   e.preventDefault();
                   var page = $(this).attr('href');
                    $('#aboutus').fadeOut('slow',function() {
                    $('#aboutus').load(page, function () {
                        $("#aboutus").fadeIn('slow');
                         return false;
                });
                });
                  return false;
          });
  $('#warning3 a').click(function(e) {
                   e.preventDefault();
                   var page = $(this).attr('href');
                    $('#privacypolicy').fadeOut('slow',function() {
                    $('#privacypolicy').load(page, function () {
                        $("#privacypolicy").fadeIn('slow');
                         return false;
                });
                });
                return false;
          });
          $('#warning2 a').click(function(e) {
                   e.preventDefault();
                   var page = $(this).attr('href');
                    $('#termsofservice').fadeOut('slow',function() {
                    $('#termsofservice').load(page, function () {
                        $("#termsofservice").fadeIn('slow');
                         return false;
                });
                });
                return false;
          });
           $('#ffo #t').click(function(e) {
                   e.preventDefault();
                   $("#cover2").fadeIn('slow');
                   var page = $(this).attr('href');
                    $('#termsofservice').fadeOut('slow',function() {
                    $('#termsofservice').load(page, function () {
                        $("#termsofservice").fadeIn('slow');
                         return false;
                });
                });
                return false;
          });
          $('#ffo #p').click(function(e) {
                   e.preventDefault();
                   $("#cover3").fadeIn('slow');
                   var page = $(this).attr('href');
                    $('#privacypolicy').fadeOut('slow',function() {
                    $('#privacypolicy').load(page, function () {
                        $("#privacypolicy").fadeIn('slow');
                         return false;
                });
                });
                return false;
          });
          $('#ffo #a').click(function(e) {
                   e.preventDefault();
                   $("#cover").fadeIn('slow');
                   var page = $(this).attr('href');
                    $('#aboutus').fadeOut('slow',function() {
                    $('#aboutus').load(page, function () {
                        $("#aboutus").fadeIn('slow');
                         return false;
                });
                });
                return false;
          });
          $('#cover').click(function() {
              $("#cover").fadeOut('slow');
          });
          $('#cover2').click(function() {
              $("#cover2").fadeOut('slow');
          });
          $('#cover3').click(function() {
              $("#cover3").fadeOut('slow');
          });
     });
</script>

    <?// the function that makes the cover page ?>

</head>
<body>
    <div id="ffo"> <footer class="footer">  <a  id="a" href="aboutUs.php">About us</a> |
             <a  id="t" href="termsOfService.php">Terms of service</a> |
             <a  id="p" href="privacyPolicy.php">Privacy Policy</a></footer></div>
         <?// the buttons of the which are in the footer and their positions and they herf to function by calling its name "cover()""?>

<div id="cover">
	<div id="warning" >
            <div id="aboutus"></div>
<footer><a href="aboutUs.php">About Us</a> | <a href="termsOfService.php">Terms of service</a> |
             <a href="privacyPolicy.php" >Privacy Policy</a></footer>
        </div>
</div>
              <div id="cover2" >
	<div id="warning2" >
 <div id="termsofservice"></div>
<footer><a href="aboutUs.php">About Us</a> | <a href="termsOfService.php">Terms of service</a>
             | <a href="privacyPolicy.php" >Privacy Policy</a></footer>
	</div>
</div>
    <div id="cover3">
	<div id="warning3">

<div id="privacypolicy"></div>
<footer><a href="aboutUs.php" >About Us</a> | <a href="termsOfService.php">Terms of service</a> |
    <a href="privacyPolicy.php" >Privacy Policy</a>
             </footer>
	</div>

</div>
<?//  write what will be in the cover page , in the coveer page will be a button "back"which you can go back to the page and the text ?>

</body>
</html>